<template>
  <div class="authorityConfig">
    <el-card>
      <div class="form_wrap">
        <el-form ref="form" :rules="rules" :model="formData" label-width="80px">
          <el-form-item label="角色" prop="role_id" v-if="!isTeacher">
            <el-select
              v-model="formData.id"
              placeholder="请选择角色"
              @change="changeRole"
              disabled
            >
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="describe" v-if="!isTeacher">
            <el-input
              v-model="formData.describe"
              style="width: 218px;"
              placeholder="请填写描述内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="颜色" prop="color" v-if="!isTeacher">
            <el-color-picker v-model="formData.color"></el-color-picker>
          </el-form-item>
          <el-form-item label="姓名" v-if="isTeacher">
            <span>{{ formData.name }}</span>
          </el-form-item>
          <el-form-item label="权限">
            <el-tree
              :data="treeData"
              :show-checkbox="false"
              node-key="name"
              ref="tree"
              :default-expand-all="true"
              :check-on-click-node="true"
              :default-checked-keys="checkedData"
              :props="defaultProps"
              :expand-on-click-node="false"
              @current-change="checkTreeItem"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <el-checkbox-group
                    v-model="data.checkedList"
                    @change="selectRight(node, data)"
                  >
                    <el-checkbox
                      v-for="right in data.rights"
                      :label="right.value"
                      :key="right.value"
                      >{{ right.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </span>
              </span>
            </el-tree>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="handleCancel">取 消</el-button>
            <el-button size="small" type="primary" @click="handleSubmit"
              >确 定</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import http from "@/api/role";
import teacherAPI from "@/api/teacher";
export default {
  name: "authorityConfig",
  data() {
    return {
      formData: {
        color: "#000"
      },
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      checkedData: [], // 默认选中的内容

      checkedBtnPermissions: {}, // 按钮权限是否选中
      roleList: [],
      rules: {
        role_id: [{ required: true, message: "请选择角色" }],
        describe: [{ required: true, message: "请输入描述内容" }]
      },
      isTeacher: false, // 用于辨别是否是教师权限
      http: http
    };
  },
  methods: {
    goToURL(name, params) {
      this.$router.push({ name, params });
    },
    // 切换角色
    changeRole(role_id) {
      console.log("role_id:", role_id);
      console.log("this.formData:", this.formData);
    },

    // 获取详情
    getContentDetail(id) {
      this.http.getContentDetail({ id }).then(res => {
        this.formData = res.data;
        // console.log('getContentDetail', res.data)
        if (this.formData.password) {
          delete this.formData.password;
        }
        if (res.data.rules) {
          this.checkedBtnPermissions = JSON.parse(res.data.rules);
          console.log("checkedBtnPermissions", this.checkedBtnPermissions);
          // 初始化权限
          this.treeData.map(item => {
            item.children.map(it => {
              if (this.checkedBtnPermissions[it.meta.api]) {
                it.checkedList = this.checkedBtnPermissions[it.meta.api];
              }
            });
          });
        }
      });
    },
    getList() {
      http.getList().then(res => {
        this.roleList = res.data.data;
      });
    },
    getPageParams() {
      if (Object.keys(this.$route.params).length) {
        sessionStorage.setItem(
          "authorityConfigParams",
          JSON.stringify(this.$route.params)
        );
      }

      let pageParams = sessionStorage.getItem("authorityConfigParams");
      if (pageParams) {
        pageParams = JSON.parse(pageParams);

        if (!pageParams.role) {
          this.getList();
        }

        if (pageParams.role == "teacher") {
          this.isTeacher = true;
          this.http = teacherAPI;
        }

        if (pageParams.role_id) {
          this.getContentDetail(pageParams.role_id);
          this.$set(this.formData, "id", pageParams.role_id);
        }
      }
    },

    // 选择权限
    selectRight(node, data) {
      // console.log('node, data:',node, data);
      this.checkedBtnPermissions[data.meta.api] = data.checkedList;
    },
    handleCancel() {
      this.$router.go(-1);
    },
    handleSubmit() {
      let arr = this.$refs.tree.getCheckedKeys();

      // console.log('this.treeData:',this.treeData);
      // console.log('this.checkedBtnPermissions:',this.checkedBtnPermissions);

      let data = JSON.parse(JSON.stringify(this.formData));
      data.rules = JSON.stringify(this.checkedBtnPermissions);

      this.http.editContent(data).then(res => {
        this.$message.success(res.msg || "编辑成功！");
        if (this.isTeacher) {
          this.$router.push({ name: "authorityList" });
        } else {
          this.$router.push({ name: "authorityManage" });
        }
      });
    },
    checkTreeItem(aa, bb) {
      console.log("checkTreeItem aa,bb:", aa, bb);
    }
  },
  created() {
    this.getPageParams();

    let routerData = JSON.parse(JSON.stringify(this.$router.options.routes));
    this.treeData = routerData.filter(item => {
      if (item.meta) {
        item.label = item.meta.title;
        if (item.children) {
          let flag = item.children.filter(it => {
            it.label = it.meta.title;

            if (it.rights) {
              return true;
            } else {
              return false;
            }
          });
          if (flag.length) {
            item.children = flag;
            return true;
          } else {
            return false;
          }
        }
      } else {
        return false;
      }
    });
    // console.log('treeData', this.treeData)
  }
};
</script>

<style lang="scss" scoped>
.authorityConfig {
  height: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
}
</style>

<style lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
